<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="我的订单"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <!-- Tab 切换 -->
    <view class="tab-bar">
      <view
        v-for="tab in tabs"
        :key="tab.value"
        class="tab-item"
        :class="{ active: activeTab === tab.value }"
        @click="switchTab(tab.value)"
      >
        <text>{{ tab.label }}</text>
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view class="order-list" :scroll-y="true">
      <view v-if="currentOrders.length > 0" class="list-content">
        <view
          v-for="order in currentOrders"
          :key="order.id"
          class="order-item"
          @click="handleOrderClick(order)"
        >
          <view class="order-header">
            <text class="order-no">订单号：{{ order.orderNo }}</text>
            <view class="order-status" :class="getStatusClass(order.status)">
              <text>{{ order.statusText }}</text>
            </view>
          </view>
          <view class="order-content">
            <image :src="order.image" class="order-image" mode="aspectFit" />
            <view class="order-info">
              <text class="order-name">{{ order.name }}</text>
              <view class="order-bottom">
                <text class="order-price">¥ {{ order.price }}</text>
                <text class="order-quantity">x {{ order.quantity }}</text>
              </view>
            </view>
          </view>
          <view class="order-footer">
            <view class="order-total">
              <text class="total-label">合计：</text>
              <text class="total-price">¥ {{ order.totalPrice }}</text>
            </view>
            <view class="order-actions">
              <view
                v-if="order.status === 'pending'"
                class="action-btn btn-cancel"
                @click.stop="handleCancel(order)"
              >
                <text>取消订单</text>
              </view>
              <view
                v-if="order.status === 'pending'"
                class="action-btn btn-pay"
                @click.stop="handlePay(order)"
              >
                <text>去支付</text>
              </view>
              <view
                v-if="order.status === 'completed'"
                class="action-btn btn-detail"
                @click.stop="handleOrderClick(order)"
              >
                <text>查看详情</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else class="empty-state">
        <view class="empty-icon">
          <uni-icons type="list" size="80" color="#d9d9d9"></uni-icons>
        </view>
        <text class="empty-text">暂无订单~</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

// Tab 配置
const tabs = ref([
  { label: "全部", value: "all" },
  { label: "待付款", value: "pending" },
  { label: "已完成", value: "completed" },
]);

// 当前激活的 tab
const activeTab = ref("all");

// 所有订单
const allOrders = ref([
  {
    id: 1,
    orderNo: "202501201234567890",
    name: "智慧版授权",
    price: "1.00",
    quantity: 1,
    totalPrice: "1.00",
    image: "/static/logo.png",
    status: "pending",
    statusText: "待付款",
  },
  {
    id: 2,
    orderNo: "202501201234567891",
    name: "子门店席位",
    price: "100.00",
    quantity: 2,
    totalPrice: "200.00",
    image: "/static/logo.png",
    status: "completed",
    statusText: "已完成",
  },
]);

// 当前显示的订单列表
const currentOrders = computed(() => {
  if (activeTab.value === "all") {
    return allOrders.value;
  }
  return allOrders.value.filter((order) => order.status === activeTab.value);
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 切换 tab
const switchTab = (tab) => {
  activeTab.value = tab;
};

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    pending: "status-pending",
    completed: "status-completed",
  };
  return classMap[status] || "";
};

// 点击订单
const handleOrderClick = (order) => {
  console.log("查看订单详情:", order);
  uni.showToast({
    title: "订单详情",
    icon: "none",
  });
  // TODO: 跳转到订单详情页面
};

// 取消订单
const handleCancel = (order) => {
  uni.showModal({
    title: "提示",
    content: "确定取消该订单吗？",
    success: (res) => {
      if (res.confirm) {
        console.log("取消订单:", order);
        uni.showToast({
          title: "订单已取消",
          icon: "none",
        });
        // TODO: 调用取消订单接口
      }
    },
  });
};

// 去支付
const handlePay = (order) => {
  console.log("去支付:", order);
  uni.showToast({
    title: "去支付",
    icon: "none",
  });
  // TODO: 跳转到支付页面
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

// Tab 栏
.tab-bar {
  display: flex;
  background-color: #fff;
  padding: 0 30rpx;
  position: sticky;
  top: 88rpx;
  z-index: 10;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;

  &.active {
    color: #333;
    font-weight: 600;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60rpx;
      height: 4rpx;
      background-color: #ffb200;
      border-radius: 2rpx;
    }
  }

  &:active {
    opacity: 0.7;
  }
}

// 订单列表
.order-list {
  height: calc(100vh - 88rpx - 72rpx);
  padding: 20rpx 30rpx;
}

.list-content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.order-item {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.order-no {
  font-size: 24rpx;
  color: #999;
}

.order-status {
  font-size: 26rpx;
  font-weight: 500;

  &.status-pending {
    color: #ff9500;
  }

  &.status-completed {
    color: #00c48c;
  }
}

.order-content {
  display: flex;
  gap: 20rpx;
  padding: 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.order-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  flex-shrink: 0;
}

.order-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.order-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.order-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.order-price {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: 600;
}

.order-quantity {
  font-size: 24rpx;
  color: #999;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 24rpx;
}

.order-total {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
}

.total-label {
  font-size: 26rpx;
  color: #666;
}

.total-price {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: 700;
}

.order-actions {
  display: flex;
  gap: 16rpx;
}

.action-btn {
  padding: 12rpx 32rpx;
  border-radius: 50rpx;
  font-size: 26rpx;
  font-weight: 500;

  &:active {
    opacity: 0.8;
  }
}

.btn-cancel {
  background-color: #fff;
  border: 2rpx solid #d9d9d9;
  color: #666;
}

.btn-pay,
.btn-detail {
  background-color: #ffb200;
  color: #333;
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  background-color: #fff;
  border-radius: 12rpx;
}

.empty-icon {
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>
